/**
* 左边菜单
*/ 
<template>
  <div class="menus">
    <div class="logobox" @click="backtab">
      <div style="text-align: center">
        {{ collapsed ? "游呵" : "游呵教育系统后台" }}
      </div>
    </div>

    <el-menu
      :collapse="collapsed"
      collapse-transition
      router
      @select="handleSelect"
      :default-active="$route.path"
      unique-opened
      class="el-menu-vertical-demo"
      background-color="#334157"
      text-color="#fff"
      active-text-color="#409ef1"
    >
      <!-- <el-menu-item v-for="menu in allmenu" :key="menu.menuid" :index="'/'+menu.url" v-if="menu.menus.length==0">
        <i class="iconfont" :class="menu.icon"></i>
        <span>{{menu.menuname}}</span>
      </el-menu-item> -->
      <!-- <el-submenu
        v-for="menu in allmenu"
        :key="menu.id+'a'"
        :index="menu.id+'b'"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.name }}</span>
        </template>
      </el-submenu> -->
      <div v-for="(item, index) in allmenu"  @click="showName(item.name)" :key="index">
        <!-- 二级菜单 -->
        <el-menu-item :index="item.url" :key="item.id">
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>
<script>
import "@/assets/ico/iconfont.css";
export default {
  name: "leftnav",
  data() {
    return {
      collapsed: false,
      allmenu: [],
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.init();
    // 监听
    this.$root.Bus.$on("toggle", (value) => {
      this.collapsed = !value;
    });
  },
  methods: {
    init: function () {
      let tData = {
        action: "backstage/backstage-menu/admin/tree",
        headers: this.abdpConfig.getApiJson(),
        data: {},
      };

      this.abdpAjax.http(tData).then((rsp) => {
        if (rsp.data.code == "200") {
          this.allmenu = rsp.data.data;
        } else {
          this.$message.error(rsp.data.message);
        }
      });
    },
    // 关闭tab，回到首页
    backtab() {
      this.$router.push({ path: "/dataStatistics" });
    },
    showName(name) {
      console.log(name);
      // 把菜单名称放进去，当成tab页的名称
      this.$store.commit("set_showName", name);
      this.$store.commit("set_role", "pass");
    },
    handleSelect(key, indexPath) {},
  },
};
</script>
<style>
.menus .el-menu-item.is-active {
  color: #409eff;
  background-color: #293446 !important;
  border-right: 4px solid #409eff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu-item{
  padding-left:40px !important;
}
.el-menu {
  border: none;
}
.logobox {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  color: #fff !important;
  /* background-color: #f2f2f2; */
  font-size: 16px;
  text-align: center;
  padding: 10px 0px;
}
.logoimg {
  height: 40px;
}
</style>